<script setup>
	// import {
	// 	ref,
	// 	onMounted
	// } from 'vue'
	import {
		listApi
	} from '@/apis/task.js'
	import {
		useList
	} from '@/hooks/index.js'

	const {
		list,
		hasMore,
		goBottom,
		isTriggered,
		refresh
	} = useList(listApi, 1)
	// // 1. 列表数据查询渲染
	// const list = ref([])
	// const hasMore = ref(true)
	// const parmas = {
	// 	page: 1,
	// 	pageSize: 10
	// }
	// const getList = async () => {
	// 	const {
	// 		data
	// 	} = await listApi(1, parmas.page, parmas.pageSize)
	// 	console.log('待提货列表：', data);
	// 	list.value.push(...data.items)
	// 	if (parseInt(data.counts) === list.value.length) {
	// 		hasMore.value = false
	// 	}
	// }
	// onMounted(() => {
	// 	getList()
	// })
	// // 2. 上拉分页
	// const goBottom = async () => {
	// 	if (hasMore.value === false) return
	// 	parmas.page++
	// 	getList()
	// }

	// // 3. 下拉刷新
	// // 控制下拉刷新loading效果的显示和隐藏:true显示 ｜ false 关闭
	// const isTriggered = ref(false)
	// const refresh = async () => {
	// 	isTriggered.value = true
	// 	console.log('开始刷新');
	// 	/**
	// 	 * 下拉刷新步骤：重新获取最新的任务列表数据（核心）
	// 	 * 1. 重置操作？
	// 	 *   1.1 页码重置为 1
	// 	 *   1.2 列表数据重置为[]空数组
	// 	 *   1.3 hasMore 重置为 true
	// 	 * 		
	// 	 * 2. 重新发请求(刷新列表)
	// 	 */
	// 	parmas.page = 1
	// 	list.value = []
	// 	hasMore.value = true
	// 	await getList()
	// 	isTriggered.value = false
	// }
</script>

<template>
	<scroll-view @scrolltolower="goBottom" scroll-y class="scroll-view" @refresherrefresh="refresh"
		:refresher-enabled="true" :refresher-triggered="isTriggered">
		<view class="scroll-view-wrapper">
			<!-- 待提货任务列表 -->
			<view v-for="pickup in list" :key="pickup.id" class="task-card">
				<navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${pickup.id}`">
					<view class="header">
						<text class="no">任务编号: {{ pickup.transportTaskId }}</text>
						<!-- <text class="status">已延迟</text> -->
					</view>
					<view class="body">
						<view class="timeline">
							<view class="line">{{ pickup.startAddress }}</view>
							<view class="line">{{ pickup.endAddress }}</view>
						</view>
					</view>
				</navigator>
				<view class="footer">
					<view class="label">提货时间</view>
					<view class="time">{{ pickup.planDepartureTime }}</view>
					<navigator v-if="pickup.enablePickUp" hover-class="none" :url="`/subpkg_task/pickup/index?id=${pickup.id}`"
						class="action">
						提货
					</navigator>
					<navigator v-else hover-class="none" url=" " class="action disabled">
						提货
					</navigator>
				</view>
			</view>
			<view v-if="list.length ===0" class="task-blank">无待提货物</view>

		</view>


		<!--  没有更多数据提示 -->
		<view class="noMore" v-if="hasMore === false">
			没有更多数据了...
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>